<template>
    <div class="shortcut-keys-tip">
        <el-dialog
            v-model="dialogVisible"
            title="快捷键"
            width="848px"
        >
            <div class="content-wrap">
                <div class="content-item">
                    <div class="content-item-header">常规操作</div>
                    <div class="row-wrap">
                        <div class="left-wrap">保存</div>
                        <div class="right-wrap">
                            <div class="tag-wrap">ctrl</div>
                            <div class="tag-wrap">S</div>
                        </div>
                    </div>
                    <div class="row-wrap">
                        <div class="left-wrap">后退</div>
                        <div class="right-wrap">
                            <div class="tag-wrap">ctrl</div>
                            <div class="tag-wrap">Z</div>
                        </div>
                    </div>
                    <div class="row-wrap">
                        <div class="left-wrap">前进</div>
                        <div class="right-wrap">
                            <div class="tag-wrap">ctrl</div>
                            <div class="tag-wrap">Y</div>
                        </div>
                    </div>
                </div>

                <div class="content-item">
                    <div class="content-item-header">组件操作</div>
                    <div class="row-wrap">
                        <div class="left-wrap">复制</div>
                        <div class="right-wrap">
                            <div class="tag-wrap">ctrl</div>
                            <div class="tag-wrap">C</div>
                        </div>
                    </div>
                    <div class="row-wrap">
                        <div class="left-wrap">删除</div>
                        <div class="right-wrap">
                            <div class="tag-wrap">delete</div>
                        </div>
                    </div>
                    <div class="row-wrap">
                        <div class="left-wrap">图层置顶（自由面板子控件）</div>
                        <div class="right-wrap">
                            <div class="tag-wrap">ctrl</div>
                            <div class="tag-wrap">shift</div>
                            <div class="tag-wrap">↑</div>
                        </div>
                    </div>
                    <div class="row-wrap">
                        <div class="left-wrap">图层置底（自由面板子控件）</div>
                        <div class="right-wrap">
                            <div class="tag-wrap">ctrl</div>
                            <div class="tag-wrap">shift</div>
                            <div class="tag-wrap">↓</div>
                        </div>
                    </div>
                    <div class="row-wrap">
                        <div class="left-wrap">图层上移（自由面板子控件）</div>
                        <div class="right-wrap">
                            <div class="tag-wrap">ctrl</div>
                            <div class="tag-wrap">↑</div>
                        </div>
                    </div>
                    <div class="row-wrap">
                        <div class="left-wrap">图层下移（自由面板子控件）</div>
                        <div class="right-wrap">
                            <div class="tag-wrap">ctrl</div>
                            <div class="tag-wrap">↓</div>
                        </div>
                    </div>
                    <div class="row-wrap">
                        <div class="left-wrap">位置移动（自由面板子控件）</div>
                        <div class="right-wrap">
                            <div class="tag-wrap">↑</div>
                            <div class="tag-wrap">↓</div>
                            <div class="tag-wrap">←</div>
                            <div class="tag-wrap">→</div>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
    name: 'ShortcutKeysTip',
    setup() {
        const dialogVisible = ref(false)

        const show = () => {
            dialogVisible.value = true
        }

        return {
            dialogVisible,
            show
        }
    }
})
</script>

<style lang="less" scoped>
.content-wrap {
    display: flex;
    align-items: flex-start;
    .content-item {
        flex: 1;
        margin: 0 20px;
        .content-item-header {
            width: 100%;
            line-height: 32px;
            color: var(--edit-text-color-regular);
            border-bottom: 1px solid var(--edit-border-color);
            margin-bottom: 6px;
            padding: 0 4px;
            box-sizing: border-box;
        }
        .row-wrap {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 13px;
            color: var(--edit-text-color-secondary);
            line-height: 38px;
            padding: 0 4px;
            box-sizing: border-box;
            .left-wrap {
                // 
            }
            .right-wrap {
                display: inline-flex;
                align-items: center;
                .tag-wrap {
                    height: 22px;
                    line-height: 22px;
                    border: 1px solid var(--edit-border-color);
                    border-radius: 4px;
                    padding: 0 7px;
                    & + .tag-wrap {
                        margin-left: 8px;
                    }
                }
            }
        }
    }
}
</style>